import React, { memo, useState } from "react";
import { AskCommentListDetailWrapper } from "./style";
import { isToken } from "@/hooks";
import {
  Tooltip,
  message,
  Empty,
  Comment,
  Button,
  Collapse,
  Input,
} from "antd";
import moment from "moment";
import {
  setMommentLove,
  setMommentComment,
  getMommentComment,
  setMommentCommentLike,
} from "@/service/discover";
const { TextArea } = Input;
const { Panel } = Collapse;

const isLogin = async (history) => {
  let token = await isToken();
  if (!token) {
    history.push("/login");
    return;
  }
};

const setCommentLove = async (
  islike,
  article_id,
  userDetail,
  cid,
  callBack
) => {
  let obj = {
    islike,
    article_id,
    user_id: userDetail.id,
    comment_id: cid,
  };
  const res = await setMommentCommentLike(obj);
  console.log(res);
  if (res.data.msg) {
    message.warning(res.data.msg);
  } else {
    message.success("操作成功!");
  }
  callBack && callBack();
};

function Comment1(props) {
  const {
    page,
    getComment,
    refresh,
    commentList,
    setCurrentTextFocusAid,
    uid,
    aid,
    history,
    userDetail,
  } = props;
  const [commentValue, setcommentValue] = useState("");
  const loveClick = async (cid, article_id, islike) => {
    isLogin(history);
    setCommentLove(islike, article_id, userDetail, cid, async () => {
      for (let i = 1; i <= page; i++) {
        await getComment(true, i);
      }
    });
  };
  const textAreaChange = (e) => {
    setcommentValue(e.target.value);
  };

  const submitComment = async (cid) => {
    isLogin(history);
    let obj = {
      article_id: aid,
      user_id: userDetail.id,
      comment_id: cid,
      content: commentValue,
      avatar: userDetail.avatarUrl,
      user_name: userDetail.nick,
    };
    const res = await setMommentComment(obj);
    if (res.data) {
      setcommentValue("");
      for (let i = 1; i <= page; i++) {
        console.log(i);
        await getComment(true, i);
      }
      refresh();
      message.success("评论成功!");
    }
  };
  return (
    <AskCommentListDetailWrapper>
      {commentList.map((item) => {
        return (
          <div key={item.id} className="comment-item">
            <div className="c-top">
              <div className="c-avatar">
                <img src={item.avatar} alt="" />
              </div>
              <div className="c-uname">
                <div className="c-name">
                  {item.user_name}
                  {item.user_id == uid ? (
                    <span className="c-name-tips">作者</span>
                  ) : (
                    ""
                  )}
                </div>
                <div className="c-time">
                  发布:
                  <Tooltip
                    title={moment(item.createAt).format("YYYY-MM-DD HH:mm:ss")}
                  >
                    <span>{moment(item.createAt).fromNow()}</span>
                  </Tooltip>
                </div>
              </div>
            </div>
            <div className="c-bottom">
              <div className="c-content">{item.content}</div>
              <div className="c-like">
                <div onClick={() => loveClick(item.id, item.article_id, true)}>
                  <i className="iconfont icon-dianzan"></i>
                  <span>{item.love_num}</span>
                </div>
                <div onClick={() => loveClick(item.id, item.article_id, false)}>
                  <i className="iconfont icon-dislike"></i>
                  <span>{item.hate_num}</span>
                </div>
              </div>
              <Collapse ghost={true}>
                <Panel header="回复TA" key="1">
                  <TextArea
                    className="comment-text-area"
                    bordered={false}
                    allowClear={true}
                    onFocus={() => setCurrentTextFocusAid(item.article_id)}
                    rows={2}
                    value={commentValue}
                    onChange={(e) => textAreaChange(e, item.article_id)}
                    placeholder={"回复:" + item.user_name}
                  />
                  <div className="comment-btn">
                    <Button
                      type="primary"
                      className="comment-btn-submit"
                      size="small"
                      onClick={() => submitComment(item.id)}
                    >
                      提交回复
                    </Button>
                  </div>
                </Panel>
              </Collapse>
              <div className="children">
                {item.children.length > 0 ? (
                  <Comment2
                    page={page}
                    getComment={getComment}
                    refresh={refresh}
                    aid={aid}
                    uid={uid}
                    setCurrentTextFocusAid={setCurrentTextFocusAid}
                    userDetail={userDetail}
                    history={history}
                    commentList={item.children}
                  ></Comment2>
                ) : (
                  ""
                )}
              </div>
            </div>
          </div>
        );
      })}
    </AskCommentListDetailWrapper>
  );
}

function Comment2(props) {
  const {
    page,
    getComment,
    refresh,
    commentList,
    setCurrentTextFocusAid,
    uid,
    aid,
    history,
    userDetail,
  } = props;
  const [commentValue, setcommentValue] = useState("");
  const loveClick = async (cid, article_id, islike) => {
    isLogin(history);
    setCommentLove(islike, article_id, userDetail, cid, async () => {
      for (let i = 1; i <= page; i++) {
        await getComment(true, i);
      }
    });
  };
  const textAreaChange = (e) => {
    setcommentValue(e.target.value);
  };

  const submitComment = async (cid) => {
    isLogin(history);
    let obj = {
      article_id: aid,
      user_id: userDetail.id,
      comment_id: cid,
      content: commentValue,
      avatar: userDetail.avatarUrl,
      user_name: userDetail.nick,
    };
    const res = await setMommentComment(obj);
    if (res.data) {
      setcommentValue("");
      for (let i = 1; i <= page; i++) {
        console.log(i);
        await getComment(true, i);
      }
      refresh();
      message.success("评论成功!");
    }
  };
  return (
    <AskCommentListDetailWrapper>
      {commentList.map((item) => {
        return (
          <div key={item.id} className="comment-item">
            <div className="c-top">
              <div className="c-avatar">
                <img src={item.avatar} alt="" />
              </div>
              <div className="c-uname">
                <div className="c-name">
                  {item.user_name}
                  {item.user_id == uid ? (
                    <span className="c-name-tips">作者</span>
                  ) : (
                    ""
                  )}
                </div>
                <div className="c-time">
                  发布:
                  <Tooltip
                    title={moment(item.createAt).format("YYYY-MM-DD HH:mm:ss")}
                  >
                    <span>{moment(item.createAt).fromNow()}</span>
                  </Tooltip>
                </div>
              </div>
            </div>
            <div className="c-bottom">
              <div className="c-content">{item.content}</div>
              <div className="c-like">
                <div onClick={() => loveClick(item.id, item.article_id, true)}>
                  <i className="iconfont icon-dianzan"></i>
                  <span>{item.love_num}</span>
                </div>
                <div onClick={() => loveClick(item.id, item.article_id, false)}>
                  <i className="iconfont icon-dislike"></i>
                  <span>{item.hate_num}</span>
                </div>
              </div>
              <Collapse ghost={true}>
                <Panel header="回复TA" key="1">
                  <TextArea
                    className="comment-text-area"
                    bordered={false}
                    allowClear={true}
                    onFocus={() => setCurrentTextFocusAid(item.article_id)}
                    rows={2}
                    value={commentValue}
                    onChange={(e) => textAreaChange(e, item.article_id)}
                    placeholder={"回复:" + item.user_name}
                  />
                  <div className="comment-btn">
                    <Button
                      type="primary"
                      className="comment-btn-submit"
                      size="small"
                      onClick={() => submitComment(item.id)}
                    >
                      提交回复
                    </Button>
                  </div>
                </Panel>
              </Collapse>
              <div className="children">
                {item.children.length > 0 ? (
                  <Comment1
                    page={page}
                    getComment={getComment}
                    refresh={refresh}
                    aid={aid}
                    uid={uid}
                    setCurrentTextFocusAid={setCurrentTextFocusAid}
                    userDetail={userDetail}
                    history={history}
                    commentList={item.children}
                  ></Comment1>
                ) : (
                  ""
                )}
              </div>
            </div>
          </div>
        );
      })}
    </AskCommentListDetailWrapper>
  );
}

export default memo(function AskCommentDetail(props) {
  const {
    refresh,
    commentList,
    setCurrentTextFocusAid,
    uid,
    aid,
    history,
    userDetail,
    page,
    getComment,
    flag,
  } = props;
  const [commentValue, setcommentValue] = useState("");
  const loveClick = async (cid, article_id, islike) => {
    isLogin(history);
    setCommentLove(islike, article_id, userDetail, cid, async () => {
      for (let i = 1; i <= page; i++) {
        await getComment(true, i);
      }
    });
  };
  const textAreaChange = (e) => {
    setcommentValue(e.target.value);
  };

  const submitComment = async (cid) => {
    isLogin(history);
    let obj = {
      article_id: aid,
      user_id: userDetail.id,
      comment_id: cid,
      content: commentValue,
      avatar: userDetail.avatarUrl,
      user_name: userDetail.nick,
    };
    const res = await setMommentComment(obj);
    if (res.data) {
      setcommentValue("");
      for (let i = 1; i <= page; i++) {
        console.log(i);
        await getComment(true, i);
      }
      refresh();
      message.success("评论成功!");
    }
  };

  return (
    <AskCommentListDetailWrapper>
      {commentList.map((item) => {
        return (
          <div key={item.id} className="comment-item">
            <div className="c-top">
              <div className="c-avatar">
                <img src={item.avatar} alt="" />
              </div>
              <div className="c-uname">
                <div className="c-name">
                  {item.user_name}
                  {item.user_id == uid ? (
                    <span className="c-name-tips">作者</span>
                  ) : (
                    ""
                  )}
                </div>
                <div className="c-time">
                  发布:
                  <Tooltip
                    title={moment(item.createAt).format("YYYY-MM-DD HH:mm:ss")}
                  >
                    <span>{moment(item.createAt).fromNow()}</span>
                  </Tooltip>
                </div>
              </div>
            </div>
            <div className="c-bottom">
              <div className="c-content">{item.content}</div>
              <div className="c-like">
                <div onClick={() => loveClick(item.id, item.article_id, true)}>
                  <i className="iconfont icon-dianzan"></i>
                  <span>{item.love_num}</span>
                </div>
                <div onClick={() => loveClick(item.id, item.article_id, false)}>
                  <i className="iconfont icon-dislike"></i>
                  <span>{item.hate_num}</span>
                </div>
              </div>
              <Collapse ghost={true}>
                <Panel header="回复TA" key="1">
                  <TextArea
                    className="comment-text-area"
                    bordered={false}
                    allowClear={true}
                    onFocus={() => setCurrentTextFocusAid(item.article_id)}
                    rows={2}
                    value={commentValue}
                    onChange={(e) => textAreaChange(e, item.article_id)}
                    placeholder={"回复:" + item.user_name}
                  />
                  <div className="comment-btn">
                    <Button
                      type="primary"
                      className="comment-btn-submit"
                      size="small"
                      onClick={() => submitComment(item.id)}
                    >
                      提交回复
                    </Button>
                  </div>
                </Panel>
              </Collapse>
              <div className="children">
                {item.children.length > 0 ? (
                  <Comment1
                    page={page}
                    getComment={getComment}
                    refresh={refresh}
                    aid={aid}
                    uid={uid}
                    setCurrentTextFocusAid={setCurrentTextFocusAid}
                    userDetail={userDetail}
                    history={history}
                    commentList={item.children}
                  ></Comment1>
                ) : (
                  ""
                )}
              </div>
            </div>
          </div>
        );
      })}
    </AskCommentListDetailWrapper>
  );
});
